<template>
    <div class="talk">
        <h2>{{school}}</h2>
        <button @click="useTalk.add">获取一句土味情话</button>
        <ul>
            <li v-for="talk in talks" :key="talk.id">{{ talk.title }}</li>
        </ul>
    </div>
</template>

<script lang="ts" setup name="Count">
import {useTalkStore} from '@/store/LoveTalk'
import { storeToRefs } from 'pinia';
const useTalk = useTalkStore()
let {talks, school} = storeToRefs(useTalk)
//订阅，类似于vue中的watch
useTalk.$subscribe((mutate,state)=>{
    console.log('talkStore数据发生变化',state)
    // localStorage.setItem('talkStoreData', JSON.stringify(state.talks))
    useTalk.setTalkData()
})
</script>

<style>
.talk {
    background-color: orange;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
select,button {
    height: 25px;
    margin: 0 10px;
}
</style>